<template>
  <view class="cate-container">
    <view class="search-box">
      <my-search @click='enterSearch'></my-search>
    </view>
    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y :style="{height: wh
+ 'px'}">
        <view :class="[active===index?'active':'','left-scroll-view-item']" v-for="(item,index) in cateList"
          :key="item.cat_id" @click="getChildren(index)">{{item.cat_name}}
        </view>
      </scroll-view>
      <!-- 右侧的滚动视图区域 -->
      <scroll-view :scroll-top="scrollTop" class="right-scroll-view" scroll-y :style="{height: wh
+ 'px'}">
        <view class="right-scroll-view-item" v-for="item in level2List" :key="item.cat_id">
          <text class="title"> /{{item.cat_name}}/</text>
          <view class="cate-lv3-list">
            <view class="cate-lv3-item" v-for="subitem in item.children" @click="gotoGoodsList(subitem)"
              :key="subitem.cat_id">
              <image :src="subitem.cat_icon" mode="widthFix"></image>
              <text>{{subitem.cat_name}}</text>
            </view>
          </view>
        </view>

      </scroll-view>
    </view>
  </view>
</template>


<script>
  export default {
    data() {
      return {
        // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        wh: 0,
        cateList: [],
        active: 0,
        scrollTop: 0,
      };
    },
    computed: {
      level2List() {
        if (this.cateList.length > 0) {
          return this.cateList[this.active].children
        } else {
          return []
        }
      }
    },
    onLoad() {
      // 获取当前系统的信息
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight - 50
      this.getCateList()
    },
    methods: {
      async getCateList() {
        const {
          data: res
        } = await uni.$http.get('/api/public/v1/categories')
        // 3.2 请求失败
        if (res.meta.status !== 200) return uni.$showMsg()
        // res.message.forEach(floor=>{
        //   floor.product_list.forEach(product=>{
        //     product.url='/subpkg/goods_list/goods_list?'+product.navigator_url.split('?')[1]
        //   })
        // })
        // 3.3 请求成功，为 data 中的数据赋值
        this.cateList = res.message
        this.cateLevel2 = this.cateList[0].children
      },
      getChildren(index) {
        this.active = index
        this.cateLevel2 = this.cateList[index].children
        this.scrollTop = this.scrollTop ? 1 : 0
      },
      gotoGoodsList(subitem) {
        uni.navigateTo({
          url: '../../subpkg/goods_list/goods_list?cid=' + subitem.cat_id
        })
      },
      enterSearch() {
        uni.navigateTo({
          url: '../../subpkg/search/search'
        })
      },
    }
  }
</script>

<style lang="scss">
  .cate-container {
   position: relative;
    .scroll-view-container {
      display: flex;

      .search-box {
        position: sticky;
        top: 0;
        z-index: 999;
      }

      .left-scroll-view {
        width: 120px;

        .left-scroll-view-item {
          line-height: 60px;
          background-color: #f7f7f7;
          text-align: center;
          font-size: 12px;

          // 激活项的样式
          &.active {
            background-color: #ffffff;
            position: relative;

            // 渲染激活项左侧的红色指示边线
            &::before {
              content: ' ';
              display: block;
              width: 3px;
              height: 30px;
              background-color: #c00000;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
            }
          }
        }
      }

      .right-scroll-view {
        .right-scroll-view-item {
          text-align: center;

          .title {
            font-size: 30rpx;
            font-weight: 700;
            padding: 40rpx 0;
          }

          .cate-lv3-list {
            display: flex;
            flex-wrap: wrap;

            .cate-lv3-item {
              width: 33.33%;
              margin-bottom: 10px;
              display: flex;
              flex-direction: column;
              align-items: center;

              image {
                width: 60px;
                height: 60px;
              }

              text {
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
</style>
